<template>
  <div class="fruit-view">
    <BaseBox>
      <template #title>
        <BaseTitle>水果百科</BaseTitle>
      </template>
      <template>
        <!-- 列表 -->
        <ul class="list-wrap">
          <li class="item" v-for="item in 155">
            <img src="http://134.175.59.248/static/%E8%8D%94%E6%9E%9D.png" alt="" />
            <p>荔枝</p>
          </li>
        </ul>
      </template>
    </BaseBox>
  </div>
</template>

<script>
export default {
  name: 'FruitView',
}
</script>

<style lang="less" scoped>
.fruit-view {
  .list-wrap {
    display: flex;
    flex-wrap: wrap;
    .item {
      height: 110px;
      width: 100px;
      margin-bottom: 40px;
      margin-right: 30px;
      cursor: pointer;
      img {
        display: block;
        border: 2px solid yellowgreen;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
        width: 100%;
        transition: 0.5s;
        &:hover {
          border-radius: 0;
          border-top-right-radius: 20px;
          border-bottom-left-radius: 20px;
        }
      }
      p {
        text-align: center;
        font-size: 13px;
      }
      &:hover {
        p {
          color: red;
        }
      }
    }
  }
}
</style>
